<template>
  <div style="width: 100% ; height: 100% ; overflow-y:scroll ; overflow-x:hidden">
      <div class="el-login-div_header">
          <img :src="imgHead" :width="1400" style="margin-left: 100px">
      </div>

      <div class="el-login-div_body">
          <Particles
              class="login_particles"
          />

          <div class="el-login-div_body_animation" style="flex: 1">
              <lottie :options="animation" :height="500" :width="450" v-on:animCreated="handleAnimation"/>
          </div>


          <div  style="flex: 1;">
              <Transition name="login" mode="out-in">
              <el-card v-if="isLogin" class="el-login-div_body_card">
                  <div class="el-login-div_body_card_div">
                      <div class="el-login-div_body_card_div_div">
                          <el-button style="border-radius: 25px ; width: 180px ; margin-top: 160px ; margin-left: 70px ; background-image: linear-gradient(to  right, #1A697D, #3CBA93) ; color: white" size="large" @click="isLogin = false">SIGN Up</el-button>
                      </div>

                      <div style="flex: 1 ; margin-top: 75px">
                          <span style="font-size: 30px ; margin-left: 100px ;">Sign In</span>
                          <el-form :model="form"  style="margin: 20px" :rules="rules" ref="ResForm">
                              <el-form-item prop="account">
                                  <el-input v-model="form.account"  placeholder="User" clearable size="large" :prefix-icon="User"/>
                              </el-form-item>
                              <el-form-item  prop="password">
                                  <el-input v-model="form.password" placeholder="Password" type="password" show-password clearable size="large" :prefix-icon="Lock"/>
                              </el-form-item>
                              <el-form-item>
                                  <el-button style="border-radius: 25px ; width: 180px ; margin-left: 50px ; background-image: linear-gradient(to  right, #1A697D, #3CBA93) ; color: white" size="large" @click="handleLogin()">SIGN In</el-button>
                              </el-form-item>
                          </el-form>
                      </div>
                  </div>
              </el-card>

              <el-card v-else class="el-login-div_body_card">
                  <div class="el-login-div_body_card_div">
                      <Transition name="status" mode="out-in">
                      <div v-if="isStatus === -1" style="flex: 1 ; margin-top: 75px">
                          <span style="font-size: 30px ; margin-left: 100px ;">Sign Up</span>
                          <el-form :model="form"  style="margin: 20px" >
                              <el-form-item>
                                  <span style="font-family: XiangSu ; font-weight: bolder ; font-size: 16px">请选择需要注册的身份:</span>
                                  <el-divider></el-divider>
                                  <el-checkbox-group  :min="1" :max="1">
                                      <el-checkbox v-for="(status,key) in checkedStatus"  :label="status.name" :model-value="status.id" @change="handleChecked(status.id)"></el-checkbox>
                                  </el-checkbox-group>
                              </el-form-item>
                          </el-form>

                          <div style="margin-left: 20px ; font-size: 14px">
                              <span style="font-family: XiangSu ; color: green">俱乐部宣言:测试</span>
                          </div>
                      </div>

                      <div v-else-if="isStatus === 0" style="flex: 1 ; margin-top: 75px">
                          <span style="font-size: 30px ; margin-left: 130px ; cursor: pointer" @click="isStatus = -1">Back</span>
                          <el-form :model="form"  style="margin: 20px" >
                              <el-form-item>
                                  <el-input v-model="form.password" placeholder="Password" type="password" show-password clearable :prefix-icon="Lock"/>
                              </el-form-item>
                              <el-form-item>
                                  <el-input v-model="form.password" placeholder="CheckPassword" type="password" show-password clearable :prefix-icon="Lock"/>
                              </el-form-item>
                              <el-form-item>
                                  <el-button style="border-radius: 25px ; width: 180px ; margin-left: 50px ; background-image: linear-gradient(to  right, #1A697D, #3CBA93) ; color: white" size="large" >SIGN Up</el-button>
                              </el-form-item>
                          </el-form>

                          <div style="margin-top: 35px ; margin-left: 200px">
                              <span style="font-size: 12px ; font-family: XiangSu">当前身份选择:学生</span>
                          </div>
                      </div>

                      <div v-else-if="isStatus === 1" style="flex: 1 ; margin-top: 45px">
                          <span style="font-size: 30px ; margin-left: 130px ; cursor: pointer" @click="isStatus = -1">Back</span>
                          <el-form :model="tableForm"  style="margin: 20px" >
                              <el-form-item>
                                  <el-input v-model="tableForm.password" placeholder="Password" type="password" show-password clearable  :prefix-icon="Lock"/>
                              </el-form-item>
                              <el-form-item>
                                  <el-input v-model="tableForm.password" placeholder="CheckPassword" type="password" show-password clearable  :prefix-icon="Lock"/>
                              </el-form-item>
                              <el-form-item>
                                  <el-input v-model="tableForm.jobNumber" placeholder="JobNumber" type="password" show-password clearable  :prefix-icon="Guide"/>
                              </el-form-item>
                              <el-form-item>
                                  <el-button style="border-radius: 25px ; width: 180px ; margin-left: 50px ; background-image: linear-gradient(to  right, #1A697D, #3CBA93) ; color: white" size="large" >SIGN Up</el-button>
                              </el-form-item>
                          </el-form>
                          <div style="margin-left: 200px">
                              <span style="font-size: 12px ; font-family: XiangSu">当前身份选择:教师</span>
                          </div>
                      </div>
                      </Transition>

                      <div class="el-login-div_body_card_div_div_Two">
                          <el-button style="border-radius: 25px ; width: 180px ; margin-top: 160px ; margin-left: 70px ; background-image: linear-gradient(to  right, #1A697D, #3CBA93) ; color: white" size="large" @click="isLogin = true">SIGN In</el-button>
                      </div>
                  </div>
              </el-card>
              </Transition>
          </div>

      </div>

      <div class="el-login-div_bottom">
          <div class="el-login-div_bottom_div">
              <span style="font-size: 12px">团队名称: {{ bottom.teamName }} 感谢图片资源提供:城北的狸花猫</span>
          </div>

          <div class="el-login-div_bottom_div">
              <span style="font-size: 12px">版权所有: {{ bottom.copyright }}</span>
          </div>

          <div class="el-login-div_bottom_div">
              <span style="font-size: 12px">地址: {{ bottom.address }}</span>
          </div>

          <div class="el-login-div_bottom_div">
              <span style="font-size: 12px">电话: {{ bottom.phone }}</span>
          </div>

          <div class="el-login-div_bottom_div">
              <span style="font-size: 12px">备案/许可证编号: {{ bottom.id }}</span>
          </div>
      </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import lottie from "vue-lottie";
//import * as animationData from '../../assets/Lottie/animation_lkjooqns.json'
import * as animationData from '../../assets/Lottie/animation_lkkq8t07.json'
import {Guide, Lock, User} from "@element-plus/icons-vue";
import Particles from "@/views/Particles.vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import router from "@/router";

// TODO imgUrl 缺少详细磁盘路径
const imgHead = ref(require('../../assets/2540.jpg'));
//const imgHead = ref(require('../../assets/Logo1.png'));
const animation = ref({animationData: animationData.default})
const isLogin = ref(true)
const isStatus = ref(-1)
const ResForm = ref(null)

const checkedStatus = ref([
    {
        id:0,
        name:'学生'
    },
    {
        id:1,
        name:'教师'
    }
])

const rules = ref({
    account:[
        {required:true,message:"请输入用户名..",trigger:"blur"}

    ],
    password:[
        {required:true,message:"请输入密码..",trigger:"blur"},
        { min: 5, message: '密码的位数请超过5位..', trigger: 'blur' }
    ]
})

const form = ref({
    account:"",
    password:"",
    status:"student"
})

const tableForm = ref({
    account:"",
    password:"",
    jobNumber:"",
    status:"teacher"
})

const bottom = ref({
    teamName:"开发者俱乐部",
    copyright:"@南昌大学共青学院（2009-2020）南昌大学共青学院",
    address:"共青城市南湖大道465号",
    phone:"07924342912",
    id:"赣ICP备10001702"
})

// 处理登录的方法
const handleLogin = async()=>{
    // 表单验证
    ResForm.value.validate(async (valid)=>{
        if (valid){
            await request.post("/Login/studentLogin",form.value).then(res => {
                if (res.code === 200) {
                    ElMessage.success("登录成功!!")

                    // let data = res.data
                    // window.sessionStorage.setItem("token",data)

                    //router.replace('/index')

                } else {
                    ElMessage.error(res.msg)
                }
            })
        }
    })
}

function handleAnimation(anim){
    anim.setSpeed(0.5);
}

const handleChecked = (res) => {
    isStatus.value = res
}
</script>

<style lang="scss" scoped>
//$imgBak: url('../../assets/imgBak.jpg');
$imgBak: url('../../assets/login.jpg');
$imgBak_TWO: url('../../assets/login3.jpg');
//$imgUrl: url('../../assets/302636-106.webp');
$marginLeft:100px;
$marginRight:100px;

.login-enter-active,
.login-leave-active {
    transition: all 0.25s ease-out;
}

.login-enter-from {
    opacity: 0;
    transform: translateX(30px);
}

.login-leave-to {
    opacity: 0;
    transform: translateX(-30px);
}

.status-enter-active,
.status-leave-active {
    transition: all 0.25s ease-out;
}

.status-enter-from {
    opacity: 0;
    transform: translateX(30px);
}

.status-leave-to {
    opacity: 0;
    transform: translateX(-30px);
}

.login_particles{
  height: 100%;
  width: 100%;
  opacity: 0.9;
  position: fixed;
  pointer-events: none;
}

.el-login-div_header{
    //border: 1px solid black;
    height: 145px;
    display: flex;
    margin-left: $marginLeft;
    margin-right: $marginRight;
    background-color: #FEFEFF;
    -webkit-user-select: none;
}

.el-login-div_body{
  width: auto;
  height: 600px;
  //border: 1px solid red;
  display: flex;
  margin-left: $marginLeft;
  margin-right: $marginRight;
  background-color: #FEFEFF;
  //background-image: $imgUrl;
  //background-size: cover;

  .el-login-div_body_animation{
      width: 300px;
      height: 300px;
      margin-left: 20px;
  }

  :deep .el-card__body {
    padding: 0;
    height: 100%;
  }

  .el-login-div_body_card{
    border-radius: 5px;
    width: 650px;
    height: 350px;
    margin-top: 75px;
    background-color: #FBF8F6;
    -webkit-user-select: none;
    border: 0;

    .el-login-div_body_card_div{
      height: 100%;
      width: 100%;
      display: flex;

      .el-login-div_body_card_div_div{
        flex: 1;
        background-image:$imgBak;
        background-size: cover;
      }
      .el-login-div_body_card_div_div_Two{
          flex: 1;
          background-image:$imgBak_TWO;
          background-size: cover;
      }
    }
  }
}

.el-login-div_bottom{
  width: auto;
  height: 128px;
  margin-left: $marginLeft;
  margin-right: $marginRight;
  background-color: #FEFEFF;
  //border: 1px solid yellow;
  -webkit-user-select: none;
  font-family: XiangSu;
  display: block;

    .el-login-div_bottom_div{
        text-align: center;
        line-height: 25px;
    }
}
</style>